var buffalorun = setInterval(bufrun,10);
//var goalmove = setInterval(goalmoveee,10);

var bgImage;

var timelimits = 10;
var timelimitms = 100;
var sec = setInterval(timelimitsec,1000);
var msec = setInterval(timelimitmsec,1);
var secleft = timelimits;
var msleft = timelimitms; 

var canvas = document.getElementById("treeAnimation");
canvas.width = 800;
canvas.height = 600;

document.body.appendChild(canvas); 

var mouseX=0;
var mouseY=0;

var click = 0;

var chara = {
	speed : 25,
	x : 533,
	y : 350
};

var cir = {
	speed : 15,
	x : 700,
	y : 507,
};

var goal = {
	speed : 15,
	x : -121,
	y : 265,
};

var i;

var spacedown = false;
var spaceup = false;
var allow = true;
var bgoal = false;
var timeleft = true;

var context = canvas.getContext("2d"); 

//================================	IMAGE	=================================

mainchara = new Image();
mainchara.onload = function() {};
mainchara.src = "icon/mainchara.png";

circle = new Image();
circle.onload = function() {};
circle.src = "icon/mainc1.png";

goalImage = new Image();
goalImage.onload = function() {};
goalImage.src = "icon/goal2.png";

youwin = new Image();
youwin.onload = function() {};
youwin.src = "icon/you-win2.png";

youlose = new Image();
youlose.onload = function() {};
youlose.src = "icon/you-lose.png";

var whistle = new Audio("audio/Whistle-blow.mp3");
var trumpet = new Audio("audio/trumpet.wav");

function gameLoop() {
	window.requestAnimationFrame(gameLoop);
	var now = Date.now();
	var delta = now - then;
	//redraw();
	bufBG.update();
	bufBG.render();
	//update2();
	if(secleft == 0 && msleft == 0){
		if (whistle.currentTime > 0) {
			whistle.currentTime = 0;
		}
		whistle.play();
		context.drawImage(youlose, 0, 0);
		timeleft = false;
	}
	
	then = now;
}

function redraw() {

	if(timeleft){
		if(bgoal){
			clearInterval(sec);
			clearInterval(msec);
			context.drawImage(goalImage, goal.x, goal.y); 
			goal.x += 5;
			chara.x -= 5;
			context.drawImage(youwin, 0, 0);
		}
	}
	
	context.drawImage(mainchara, chara.x, chara.y); 
	context.drawImage(circle, cir.x, cir.y); 
		
	context.fillStyle = "rgb(230, 0, 0)";
	context.font = "30px Helvetica";
	context.textAlign = "left";
	context.textBaseline = "top";
	context.fillText(secleft, 620, 206);
	context.fillText(msleft, 690, 206);
}

function goalmoveee(){
	goal.x += 1;
	chara.x -=1;
}

function bufrun(){
	if(chara.x<533){
		chara.x+=1;
	}
}

function timelimitsec(){
	if(secleft>0){
		secleft--;
	}
}
function timelimitmsec(){
		if(msleft>0){
			msleft--;
		}
		else if(secleft>0 && msleft==0){
			msleft = 99;
		}
}

function sprite(options) {
	var that = {}, 
	frameIndex = 0, 
	tickCount = 0, 
	ticksPerFrame = options.ticksPerFrame || 0;
	
	numberOfFrames = options.numberOfFrames || 1;
	
	hx = 0;
	hy = 0;
	
	that.context = options.context;
	that.width = options.width;
	that.height = options.height;
	that.image = options.image;
	that.loop = options.loop;

	that.update = function() {
		
		//treeBG[0].onload = function() { bgReady = true; };
		
		tickCount += 1;
		
		if (tickCount > ticksPerFrame) {
			tickCount = 0;
			// If the current frame index is in range
			if (frameIndex < numberOfFrames) {
				// Go to the next frame
				frameIndex += 1;
				if (frameIndex==14) {
					frameIndex = 0;
				}
			}
		}
		/*else if (that.loop) {
			frameIndex = 0;
		
		}*/
	};

	that.render = function() {
		// Clear the canvas // Delete the frame before
		that.context.clearRect(hx, hy, that.width, that.height);
		
		// Draw the animation
		that.context.drawImage(that.image, frameIndex * that.width / numberOfFrames, 0, that.width / numberOfFrames, that.height, hx, hy, that.width / numberOfFrames, that.height);
		redraw();
		
	};
	return that;
}

bgImage = new Image();

var bufBG = sprite({
	context : canvas.getContext("2d"),
	width : 11200,//width : 1000,//width : 1600,
	height : 600,//height : 100,//height : 600,
	image : bgImage,
	numberOfFrames : 14,
	ticksPerFrame : 20
});

function tap(e){
	mouseX = e.pageX;
	mouseY = e.pageY;
	
	if(timeleft){
		if(chara.x>10){
			chara.x-=chara.speed;
		}
	
		if(cir.x>20){
			cir.x-=cir.speed;
		}
		else{
			bgoal = true;
			//if (trumpet.currentTime > 0) {
			//	trumpet.currentTime = 0;
			//}
			trumpet.play();
		}
	}
}

// Start the game loop as soon as the sprite sheet is loaded
//bgImage.onload = function() {};
	
bgImage.addEventListener("load", gameLoop);
document.addEventListener("mousedown", tap);
var then = Date.now();

bgImage.src = "icon/buf-bg-sprite2.png"; 